<script setup lang="ts">
import AnimationDialog from '@/components/Dialog/AnimationDialog.vue'
import { useDialogStore } from '@/stores/dialog'

import { ref, onMounted, onUnmounted } from 'vue'
// import NewWord from '@/views/Word/Achievement/PerformanceWord.vue'
import NewWord from '@/views/World3D/World.vue'
// import ChinaMap from '@/views/Word/Achievement/ChinaMap.vue'
import ChinaMap from '@/views/Maps/ChinaMap.vue'
import HeaderCom from '@/components/Layout/PageHeader/HeaderCom.vue'
import TopCom from './layout/TopCom.vue'
import AllLeft from '@/components/PermissionsModule/PerformanceAllLeft.vue'
import AllRight from '@/components/PermissionsModule/PerformanceAllRight.vue'
import GaugeFooter from '@/views/Home/layout/GaugeFooter.vue'
import { roleStore } from '@/stores/role'
import { useHomeStore } from '@/stores/module/home'
import { DEFAULT_TIMER } from '@/Utils/setting'
import { mapStore } from '@/stores/worldMap'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'

// 性别占比
import SexPie from '@/components/PermissionsModule/Performance/components/SexPie.vue'
// 国家核心经销商
import tableCoreDealers from '@/components/PermissionsModule/Performance/components/tableCoreDealers.vue'
//国家会员级别人数
import countryMemberLevelCounts from '@/components/PermissionsModule/Performance/components/countryMemberLevelCounts.vue'
// 全球新用户增涨趋势
import globalNewMemberLine from '@/components/PermissionsModule/Performance/components/globalNewMemberLine.vue'
// 全区会员年龄
import AgePie from '@/components/PermissionsModule/Performance/components/AgePie.vue'
// 全球各区有效会员
import globalValidMembers from '@/components/PermissionsModule/Performance/components/globalValidMembers.vue'
// 全球各区核心经销商
import globalCoreDealers from '@/components/PermissionsModule/Performance/components/globalCoreDealers.vue'
// 全球各区会员级别人数
import globalMemberLevelCounts from '@/components/PermissionsModule/Performance/components/globalMemberLevelCounts.vue'
// 全球业绩
import FlexRight from '@/components/Echart/flexGlobal/flexRight.vue'
// 新老会员业绩占比
import NewOldPie from '@/components/PermissionsModule/Performance/components/NewOldPie.vue'
// 零售业绩与拓展业绩占比
import RetailPie from '@/components/PermissionsModule/Performance/components/RetailPie.vue'
// 国家业绩同比
import countryPerformanceYoY from '@/components/PermissionsModule/Performance/components/countryPerformanceYoY.vue'
// 国家业绩环比
import nationalPerformanceMoM from '@/components/PermissionsModule/Performance/components/nationalPerformanceMoM.vue'
// 国家去年对比
import nationalComparisonLastYear from '@/components/PermissionsModule/Performance/components/nationalComparisonLastYear.vue'
// 业绩达成率
import nationalPerformanceGauge from '@/components/PermissionsModule/Performance/components/nationalPerformanceGauge.vue'
// 全球业绩趋势
import globalPerformanceLine from '@/components/PermissionsModule/Performance/components/globalPerformanceLine.vue'
// 各大区业绩占比
import AreaPie from '@/components/PermissionsModule/Performance/components/AreaPie.vue'
// 全球各区业绩环比
import globalPerformanceRatio from '@/components/PermissionsModule/Performance/components/globalPerformanceRatio.vue'
// 全球各区业绩同比
import globalPerformanceYoY from '@/components/PermissionsModule/Performance/components/globalPerformanceYoY.vue'

const { restWorld, restChina } = storeToRefs(mapStore())

const rolesStore = roleStore()
const { businessLevel } = rolesStore

const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore
dialogInfo.visible = false

const homeStore = useHomeStore() // 创建homeStore实例

const worldMapStore = mapStore()

const toggleMap = ref(false) // 切换地图
toggleMap.value = worldMapStore.isChina

// 监听state
worldMapStore.$subscribe((mutation, state) => {
  toggleMap.value = state.isChina
})

onMounted(() => {
  // 调取总的接口
  if (businessLevel != 0) {
    getAll()
  }
})

onUnmounted(() => {
  clearInterval(timer)
})

/**
 * @description: 1 国家 2 区域 3 全球
 */
const newRole = ref(0)
newRole.value = businessLevel // 初始化面板权限
// 监听state
rolesStore.$subscribe((mutation, state) => {
  newRole.value = state.businessLevel
})

// 去 BI 看板
const toBi = () => {
  const userStore = useUserStore() as any
  const ssoToken = userStore.userInfo.biToken // 获取ssoToken
  // 拼接加密 url
  const biUrl = import.meta.env.VITE_BI_URL + ssoToken
  window.open(biUrl)
}

let timer = null // 定时器
const getAll = () => {
  // 第一次的时候调一遍
  homeStore.getAll()
  // 之后每隔5秒调一次
  timer = setInterval(() => {
    homeStore.getAll()
  }, DEFAULT_TIMER)
}

const dialogCB = ref(null)
dialogStore.$subscribe((mutation, state) => {
  dialogCB.value.changeDialogVisible(dialogInfo.visible)
})

const dialogInfoCB = {
  title: '', // 标题
  style: 'cb', // 动画风格 左上：lt 左中：lm 左下：lb 右上：rt 右中：rm 右下：rb
  width: '60%', // 自定义宽度
}
</script>

<template>
  <Layout
    :boxClassName="'home-box'"
    :footerClassName="newRole != 3 ? '' : 'bg-none'"
  >
    <template v-slot:header>
      <HeaderCom class-name="home-header" />
    </template>
    <template v-slot:top><TopCom /></template>
    <template v-slot:left><AllLeft /></template>
    <template v-slot:main>
      <NewWord v-if="!toggleMap" />
      <ChinaMap v-if="toggleMap && !restChina" />
    </template>
    <template v-slot:right><AllRight /></template>
    <template v-slot:footer>
      <GaugeFooter v-if="newRole <= 2" />
      <el-button
        class="btnAnalyse"
        type="primary"
        v-if="newRole == 3"
        @click="toBi"
      >
        {{ $t('bi_front_countrydetailedanalysis') }}
      </el-button>
    </template>
  </Layout>
  <AnimationDialog
    ref="dialogCB"
    :dialogInfo="dialogInfoCB"
    @close="dialogInfo.visible = false"
  >
    <div v-if="dialogInfo.visible">
      <AgePie v-if="dialogInfo.componentName == 'AgePie'" :level="newRole" />
      <SexPie v-if="dialogInfo.componentName == 'SexPie'" :level="newRole" />
      <NewOldPie
        v-if="dialogInfo.componentName == 'NewOldPie'"
        :level="newRole"
      />
      <RetailPie
        v-if="dialogInfo.componentName == 'RetailPie'"
        :level="newRole"
      />
      <AreaPie v-if="dialogInfo.componentName == 'AreaPie'" :level="newRole" />
      <globalNewMemberLine
        v-if="dialogInfo.componentName == 'globalNewMemberLine'"
        :level="newRole"
      />
      <globalPerformanceLine
        v-if="dialogInfo.componentName == 'globalPerformanceLine'"
        :level="newRole"
      />
      <globalValidMembers
        v-if="dialogInfo.componentName == 'globalValidMembers'"
        :level="newRole"
      />
      <globalPerformanceYoY
        v-if="dialogInfo.componentName == 'globalPerformanceYoY'"
        :level="newRole"
      />
      <globalPerformanceRatio
        v-if="dialogInfo.componentName == 'globalPerformanceRatio'"
        :level="newRole"
      />
      <globalCoreDealers
        v-if="dialogInfo.componentName == 'globalCoreDealers'"
        :level="newRole"
      />
      <globalMemberLevelCounts
        v-if="dialogInfo.componentName == 'globalMemberLevelCounts'"
        :level="newRole"
      />
      <countryMemberLevelCounts
        v-if="dialogInfo.componentName == 'countryMemberLevelCounts'"
        :level="newRole"
      />
      <countryPerformanceYoY
        v-if="dialogInfo.componentName == 'countryPerformanceYoY'"
        :level="newRole"
      />
      <nationalPerformanceMoM
        v-if="dialogInfo.componentName == 'nationalPerformanceMoM'"
        :level="newRole"
      />
      <nationalComparisonLastYear
        v-if="dialogInfo.componentName == 'nationalComparisonLastYear'"
        :level="newRole"
      />
    </div>
  </AnimationDialog>
</template>

<style lang="scss" scoped>
.btnAnalyse {
  position: relative;
  background-color: rgba(11, 69, 202, 0.8);
}
</style>
